<template>
  <div class="center_todoitems">
    <div class="center_todoitems-chart">
      <div
        class="center_todoitems-chart-item"
        v-for="(item, index) in data"
        :key="index"
      >
        <div
          class="center_todoitems-chart-item-value"
          :style="{ color: item.color }"
        >
          {{ item.value }}
        </div>
        <div class="center_todoitems-chart-item-name">{{ item.name }}</div>
      </div>
    </div>

    <div class="center_todoitems-card">
      <div class="center_todoitems-card-top">
        <div class="center_todoitems-card-top-icon">
          <img src="../../../assets/home/completed.png" alt="" />
        </div>
        <div class="center_todoitems-card-top-record">
          <div>
            <span
              style="font-weight: 'bold'; font-size: 43px; color: #1d222c"
              >{{ taskCountObj.completePercent }}</span
            >
          </div>
          <div style="font-weight: 500; font-size: 17px; color: #85868c">
            已完成
          </div>
        </div>
      </div>
      <div class="center_todoitems-card-bottom">
        <div class="center_todoitems-card-bottom-title">
          <span style="color: #8f8f92">完成率</span>
          <span style="color: #1d222c">{{ taskCountObj.completePercent }}</span>
        </div>
        <el-progress
          :percentage="taskCountObj.num"
          :show-text="false"
          color="#F79D3E"
          define-back-color="#D3E0F9"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script setup name="TiDoItems">
import { ref } from "vue";
import { getTaskCountApi } from "@/api/home/index";

const titleArr = ref([]);
const seriesArr = ref([]);
const taskCountObj = ref({});
const data = ref([
  {
    name: "待处理",
    value: 0,
    color: "#1D60EF",
  },
  {
    name: "已处理",
    value: 0,
    color: "#62BF61",
  },
  {
    name: "已发起",
    value: 0,
    color: "#FFAB54",
  },
]);

const getTaskCount = () => {
  getTaskCountApi().then((res) => {
    if (res.code == 200) {
      taskCountObj.value = res.data;

      taskCountObj.value.num = Number(
        taskCountObj.value.completePercent.split("%").join("")
      );
    }
  });
};
getTaskCount();
</script>

<style scoped lang="scss">
.center_todoitems {
  display: flex;
  justify-content: space-between;

  &-chart {
    width: 450px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 60px 0px;

    &-item {
      text-align: center;

      &-value {
        font-weight: bold;
        font-size: 40px;
        margin-bottom: 15px;
      }

      &-name {
        font-weight: 500;
        font-size: 15px;
        color: #404348;
      }
    }
  }

  &-card {
    width: 247px;
    height: 140px;
    background: #f7faff;
    border-radius: 6px;

    &-top {
      display: flex;
      padding: 15px 20px;

      &-record {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60%;
      }

      &-icon {
        width: 75px;
        height: 74px;
        background: #5087f4;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    &-bottom {
      width: 100%;
      height: 43px;
      background: #ebf3fe;
      border-radius: 0px 0px 6px 6px;
      padding: 7px 20px;

      &-title {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        font-size: 15px;
      }
    }
  }
}
</style>
